<template>
  <section>
    <div class="wrapper">
      <h2>我申请的补充医疗互助</h2>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="item in list" :key="item.id" @click="$troute.query('mySupDetail',{id:item.id})">
              <p>
                补充医疗互助申请 
                <span>{{ item.status == 0 ? '未审核' : item.status == 1 ? '通过初审' : item.status == 2 ? '通过终审' : item.status == 3 ? '未通过' : item.status}}</span>
              </p>

              <span>申请时间：{{ item.createTime }}</span>
          </van-cell>
      </van-list>
    </div>
    <tabbar :index="index" />
  </section>
</template>
<script>
import Vue from "vue";
import tabbar from "../../components/tabbar.vue";
import api from "../../data/api/index"
import { List } from 'vant';
import { PullRefresh } from 'vant';

Vue.use(PullRefresh);
Vue.use(List);

export default {
  components: { tabbar },
  data() {
    return {
      index: 2,
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      listQ: {
          page:1,
          rows:10,
      },
      count:0,
    };
  },
  mounted(){
    this.user = JSON.parse(sessionStorage.getItem("user"));
  },
  methods: {
    async onLoad() {
      await this.getList()
      // 加载状态结束
      this.loading = false;
      // 数据全部加载完成
      if (this.list.length >= this.count) {
        this.finished = true;
      }
    },
    getList() {
      let data = {
        userId: this.user.userId
      }
      return new Promise((resolve, reject)=>{
        api.myHelpList(this.listQ ,data).then(res=>{
          if(res.data?.length > 0){
            res.data.forEach(item=>{
              if (item.createTime) {
                item.createTime = item.createTime.substring(0, item.createTime.length - 3);
              }
            })
            this.list.push(...res.data)
            this.listQ.page++ 
          }
          this.count = res.count
          resolve(res.data)
        }).catch(error => {
          reject(error);
        });
      })
    },
    
  },
};
</script>
<style lang="scss" scoped>
section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
}
.wrapper {
  padding: 25px 20px 50px;
  h2 {
    position: relative;
    display: inline-block;
    font-size: 24px;
    margin-bottom: 25px;
    z-index: 1;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 1px;
      height: 5px;
      background-color: #c9151e;
      z-index: -1;
    }
  }
  .van-cell {
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 2px 2px 8px #f2f2f2, -2px -2px 8px #f2f2f2;
    .van-cell::after {
       border-bottom: none;
     }
    i {
      display: inline-block;
      padding: 3px 15px;
      color: #ef4714;
      font-size: 12px;
      font-style: normal;
      margin-bottom: 5px;
      border: 1px solid #ef4714;
      border-radius: 25px;
    }
    p {
      position: relative;
      margin: 5px 0;
      padding-right: 15px;
      font-size: 18px;
      font-weight: bold;
      &::after {
        content: "";
        position: absolute;
        top: 5px;
        right: 0;
        width: 8px;
        height: 13px;
        background: url(../imgs/more.png) no-repeat;
        background-size: contain;
      }
      span {
        float: right;
        color: #c9151e;
        font-size: 16px;
        font-weight: normal;
      }
    }
    > span {
      color: #999;
      font-size: 10px;
    }
  }
}
</style>